<template>
	<view class="homestay-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">民宿</view>
			<view class="nav-right">
				<text class="share-icon">⋮</text>
			</view>
		</view>
		<!-- 主图区域 -->
		<view class="banner">
			<image class="banner-image" src="/static/content1.jpg" mode="aspectFill" />
		</view>
		<!-- 滚动区域 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{
							page: { size: 6 }, // 初始分页大小
							textNoMore: '-- 没有更多内容 --' 
		}">
			<!-- 过渡区域 -->
			<view class="transition-section">
				<view class="section-title">精选民宿</view>
				<view class="section-subtitle">为您推荐舒适的住宿体验</view>
			</view>

			<!-- 民宿列表 -->
			<view class="homestay-list">
				<view v-for="item in homestayList" :key="item.homeId" class="homestay-item"
					@click="goToDetail(item.homeId)">
					<image :src="item.coverImage" class="item-image" mode="aspectFill" />
					<view class="item-info">
						<text class="item-title">{{ item.name }}</text>
						<text class="item-address">{{ item.address }}</text>
						<view class="item-tags">
							<text v-for="(tag, idx) in item.tags || ['舒适', '热门', '交通便利']" :key="idx" class="item-tag">
								{{ tag }}
							</text>
						</view>
						<view class="item-price">
							<!-- <template v-if="typeof item.price === 'number'"> -->
							<template v-if="item.isPriceNumber">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ item.price }}</text>
								<text class="price-unit">起</text>
							</template>
							<template v-else>
								<text class="price-value">{{ item.price }}</text>
							</template>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		contentListByPage
	} from "@/api/system/homestay.js";
	import config from "@/config";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				homestayList: [],
				
			};
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/homestay/detail?id=${id}`
				});
			},
			upCallback(page) {
				const pageSize = 6
				//设置延迟
				setTimeout(() => {
					contentListByPage(page.num, pageSize).then(res => {
						//这里是关键的一步，如果没有或空，第二次请求会覆盖第一页的数据
						const currentPageData = res.rows || []; // 当前页数据
						const totalCount = res.total || 0

						const processedList = currentPageData.map((item) => {
							item.coverImage = 'http://101.34.184.250:8080' + item.coverImage;
							// 处理标签字段，保证为数组
							if (typeof item.tags === "string") {
								try {
									// 尝试解析为JSON数组
									const arr = JSON.parse(item.tags);
									if (Array.isArray(arr)) {
										item.tags = arr.map((tag) =>
											String(tag).replace(/^[\[\s'"]+|[\]\s'"]+$/g, "")
										);
									} else {
										item.tags = item.tags
											.split(",")
											.map((tag) => tag.replace(/^[\[\s'"]+|[\]\s'"]+$/g,
												""));
									}
								} catch {
									item.tags = item.tags
										.split(",")
										.map((tag) => tag.replace(/^[\[\s'"]+|[\]\s'"]+$/g, ""));
								}
							}
							//计算最低价
							if (item.homestayRoomList && item.homestayRoomList.length > 0) {
								item.price = Math.min(
									//扩展运算符可以把数组中的元素转换成多个参数
									...item.homestayRoomList.map((room) => Number(room.price))
								);
								item.isPriceNumber = true;
							} else {
								item.price = "暂无房型";
								item.isPriceNumber = false; // price 不是数字
							}
							return item;
						});
						if (page.num === 1) {
							this.homestayList = processedList
						} else {
							this.homestayList = [...this.homestayList, ...processedList]
						}
						// 使用正确的字段结束加载
						this.mescroll.endBySize(this.homestayList.length, totalCount)
					}).catch(() => {
						this.mescroll.endErr()
					});
				}, 1000);
			},
		},

	};
</script>

<style scoped>
	.homestay-page {
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.navbar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(var(--status-bar-height) + 120rpx);
		background: linear-gradient(90deg, #4e73df 0%, #02a7f0 100%);
		position: fixed;
		/* top: 0; */
		left: 0;
		right: 0;
		z-index: 100;
	}

	.nav-left {
		padding-top: calc(var(--status-bar-height));
		position: absolute;
		width: 24px;
		left: 30rpx;
	}

	.nav-right {
		padding-top: calc(var(--status-bar-height));
		position: absolute;
		width: 24px;
		right: 30rpx;
	}

	.back-icon,
	.share-icon {
		font-size: 24px;
		color: #fff;
	}

	.nav-title {
		padding-top: calc(var(--status-bar-height));
		font-size: 18px;
		font-weight: 500;
		color: #fff;
	}

	.content-scroll {
		flex: 1;
		margin-top: 72px;
	}

	.banner {
		margin-top: calc(var(--status-bar-height) + 119rpx);
		width: 100%;
		height: 240px;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.transition-section {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), #f5f5f5);
		padding: 24px 16px;
		text-align: center;
	}

	.section-title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}

	.section-subtitle {
		font-size: 14px;
		color: #666;
	}

	.homestay-list {
		padding: 0 16px 16px;
	}

	.homestay-item {
		background: #fff;
		border-radius: 12px;
		margin-bottom: 16px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transform: translateY(0);
		transition: transform 0.2s ease;
	}

	.homestay-item:active {
		transform: translateY(-2px);
	}

	.item-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.item-info {
		padding: 16px;
	}

	.item-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		margin-bottom: 8px;
	}

	.item-address {
		font-size: 14px;
		color: #666;
		margin-bottom: 12px;
		display: block;
	}

	.item-price {
		color: #ff4d4f;
	}

	.price-symbol {
		font-size: 14px;
	}

	.price-value {
		font-size: 24px;
		font-weight: bold;
	}

	.price-unit {
		font-size: 14px;
		margin-left: 2px;
	}

	.item-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.item-tag {
		font-size: 18px;
		color: #666;
		background: #fff;
		padding: 4px 10px;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		margin-bottom: 4px;
		margin-right: 4px;
		display: inline-block;
		min-width: 40px;
		text-align: center;
	}
</style>